---
description: Example of getting ref in react-chartjs-2.
tags:
  - Chart
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import ContextProvider from '../../src/components/ContextProvider';

# Get Chart Ref

<Tabs groupId="sandbox">
  <TabItem value="preview" label="Simple Preview" default>
    <iframe
      src="/sandboxes/chart/ref/"
      loading="lazy"
      style={{
        width: '100%',
        height: '500px',
        border: 0,
        borderRadius: '4px',
        overflow: 'hidden',
        background: 'white',
      }}
      title='react-chartjs-2 preview'
    />
    <i><a
      href='/sandboxes/chart/ref/'
      target='_blank'
      rel='noopener noreferrer'
    >Open in new tab</a></i> | <i><a
      href='https://github.com/reactchartjs/react-chartjs-2/tree/master/sandboxes/chart/ref'
      target='_blank'
      rel='noopener noreferrer'>Open on GitHub</a></i>
  </TabItem>
  <TabItem value="stackblitz" label="StackBlitz">
    <ContextProvider>
      {({ branch, theme }) => (
        <iframe
          src={`https://stackblitz.com/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/chart/ref?embed=1&file=App.tsx&view=both&theme=${theme}`}
          loading="lazy"
          style={{
            width: '100%',
            height: '500px',
            border: 0,
            borderRadius: '4px',
            overflow: 'hidden',
          }}
          title='reactchartjs/react-chartjs-2 usage example'
          allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'
          sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'
        />
      )}
    </ContextProvider>
  </TabItem>
</Tabs>
